<template>
    <div>
    	<!-- 头部、、登录、、、快捷登录 -->
    	<div class="head">
    		<image :src="src1" class="headd" @click="show2()" resize="cover"></image>
    		<text class="head1">登录</text>
    		<text class="head2" @click="shortcut_login()">手机快捷登录</text>
    	</div>
    	<!-- 头像框 -->
    	<div class="sculpt">
    		<image :src="src2" class="sculpture" resize="cover"></image>
    	</div>
    	<!-- 手机账号 -->
    	<div class="phone">
    		<div class="phone1">
    			<image :src="src3" class="phone2" resize="cover"></image>
    			<input type="text" placeholder="请输入手机号" class="inp1" v-model="iphone"/>
    		</div>
    	</div>
    	<!-- 密码 -->
    	<div class="password">
    		<div class="pass1">
    			<image :src="src4" class="phone3" resize="cover"></image>
    			<input type="password" placeholder="请输入密码" class="inp2" v-model="pass"/>
    		</div>
    	</div>
    	<!-- 找回密码 -->
    	<div class="zhaohui">
    		<text class="zhaohui1" @click="search_pass()">找回密码</text>
    	</div>
    	<!-- 登录按钮 -->
    	<div class="button">
    		<div class="denglu" @click="login()">
    			<text class="dengll">登录</text>
    		</div>
    	</div>
    	<div class="xieyi">
    		<text style="font-size: 12px;">说明：登录代表您已经同意车e家</text>
    		<text style="color: #33c179; font-size: 12px;" @click="user_agreement()">《用户协议》</text>
    	</div>
    	<!-- 万能的分割线！！！！！      弹窗~~~密码错误提示！！！！ -->
	     <div class="wrap" v-if="show">
	     	<div class="wqqq" v-if="show">
	     		
	     	</div>
	        <div class="wrap-1">
	          <div class="wrap-2">
	            <text class="wrap-3">是不是忘记密码啦？建议找回密码或用短信快捷登录哦~</text>
	            <div class="wrap-4">
	              <text @click="show7()" class="zhaohui11">找回密码</text>
	             <!--  <text>丨</text> -->
	              <text @click="show8()" class="duanxin11">短信登录</text>
	            </div>
	          </div>
	        </div>
	     </div> 
       <!-- 未注册过的提示去注册 ~~~~~弹窗-->
        <div class="wrap" v-if="show_forget">
          <div class="wqqq" v-if="show_forget"></div>
          <div class="wrap-1">
            <div class="wrap-2">
              <text class="wrap-3">你的手机号之前未登录过，需要先注册再登录哦~</text>
              <div class="wrap-4">
                <text @click="forget()" class="zhaohui11">注册</text>
              </div>
            </div>
          </div>
       </div> 
    </div>
</template>
<style scoped>
    .head{
    	width: 100%;
    	height: 32px;
    	/*background-color: pink;*/
    	box-sizing: border-box;
    	line-height: 32px;
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
    	margin-top: 17px;
    	position: fixed;
    	box-shadow: 1px 1px 1px #ccc;
    	position: relative;
    }
    .headd{
    	width: 15px;
    	height: 20px;
    	/*background-color: #33c179;*/
    	position: fixed;
    	left: 12px;
    }
    .xieyi{
    	width: 100%;
    	height: 24px;
    	justify-content: center;
    	align-items: center;
    	flex-direction: row;
    	margin-top: 19px;
    }
    .button{
    	width: 100%;
    	height: 36px;
    	justify-content: center;
    	align-items: center;
    	margin-top: 35px;
    }
    .denglu{
    	width: 160px;
    	height: 36px;
    	border-radius: 70px;
    	background-color: #33c179;
    	justify-content: center;
    	align-items: center;
    }
    .dengll{
    	color: #fff;
    }
    .zhaohui{
    	width: 100%;
    	height: 13px;
    	/*background-color: pink;*/
    	margin-top: 13px;
    	box-sizing: border-box;
      overflow: hidden;
    }
    .zhaohui1{
    	font-size: 13px;
      /*width: 70px;*/
    	line-height: 13px;
    	margin-left: 270px;
    	color: #33c179;
      box-sizing: border-box;
    }
    .head2{
    	position: absolute;
    	right: 12px;
    	margin-left: 80px;
    	font-size: 16px;
    	color: #666;
    	bottom: 3px;
    }
    .head1{
    	font-size: 20px;
    }
  	.sculpt{
  		width: 100%;
  		justify-content: center;
  		align-items: center;
  		height: 99px;
  		margin-top: 67px;
  	}
  	.sculpture{
  		width: 99px;
  		height: 99px;
  		border-radius: 50%;
  		background-color: #33c179;
  	}
  	.phone{
  		width: 100%;
  		height: 40px;
  		/*background-color: pink;*/
  		justify-content: center;
  		align-items: center;
  		margin-top: 33px;
  		z-index: 1;
  	}
  	.password{
  		width: 100%;
  		height: 40px;
  		/*background-color: pink;*/
  		margin-top: 25px;
  		justify-content: center;
  		align-items: center;
  	}
  	.phone1{
  		width: 300px;
  		height: 40px;
  		/*background-color: red;*/
  		flex-direction: row;
  		border-bottom: solid 1px #999;
  		z-index: 1;
  	}
  	.pass1{
  		width: 300px;
  		height: 40px;
  		/*background-color: red;*/
  		flex-direction: row;
  		border-bottom: solid 1px #999;
  	}
  	.phone2{
  		width: 18px;
  		height: 24px;
  		/*background-color: #33c179;*/
  		margin-left: 20px;
  		margin-top: 10px;
  	}
  	.phone3{
  		width: 17px;
  		height: 21px;
  		/*background-color: #33c179;*/
  		margin-left: 20px;
  		margin-top: 10px;
  	}
  	.inp1{
  		border: none;
  		margin-left: 10px;
  		padding-left: 10px;
  	}
  	.inp2{
  		border: none;
  		margin-left: 10px;
  		padding-left: 10px;
  	}
  	.wrap{
      width: 100%;
      height: 100%;
      position: fixed;
      /*background-color: #000;*/
      z-index: 9999;
      justify-content: center;
      align-items: center;
      opacity: 1;
    }
    .wqqq{
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #000;
      z-index: 99;
      opacity: .9;
      justify-content: center;
      align-items: center;
    }
    .wrap-1{
      width: 237px;
      height: 168px;
      border-radius: 10px;
      background-image: url(http://192.168.2.123:8080/img/dialog_one.png);
      background-size: 237px 168px;
      opacity: 1;
      box-sizing: border-box;
      padding-top: 28px;
      z-index: 99;
      background-color: #fff;
    }
    .wrap-2{
      width: 200px;
      height: 100px;
      justify-content: center;
      align-items: center;
      margin-left: 23px;
      opacity: 1;
    }
    .wrap-3{
      justify-content: center;
      align-items: center;
      font-size: 14px;
      opacity: 1;
    }
    .wrap-4{
      flex-direction: row;
      width: 220px;
      height: 31px;
      margin-top: 24px;
      justify-content: space-around;
      /*background-color: pink;*/
      align-items: center;
      opacity: 1;
    }
    .zhaohui11,.duanxin11{
      width: 83px;
      height: 31px;
      border-radius: 25px;
      background-color: #33c179;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 31px;
      opacity: 1;
    }
</style>
<script>
import "../../../js/jquery-1.8.3.js"
var stream = weex.requireModule('stream');
export default {
	data(){
	    return {
	    	src1: 'http://192.168.2.123:8080/img/index_back.png',
	    	src2: 'http://192.168.2.123:8080/img/header.jpg',
	    	src3: 'http://192.168.2.123:8080/img/login-phone-black.png',
	    	src4: 'http://192.168.2.123:8080/img/login_pass.png',
	    	show: false,
        show_forget: false,
        iphone: '',
        pass: '',
	    }
	},
	methods: {
		// 点击登录
	   login(){
    
      // 手机号和密码正则验证
      let re = /^1[0-9]{10}$/;
      let pwd = /^\w{6,14}$/;
        if (!re.test(this.iphone)) {
            alert('手机号或密码格式不正确！')
        } else if (!pwd.test(this.pass)){
            alert('手机号或密码格式不正确')
        }else{
            stream.fetch({
                method: 'POST',
                url: "http://192.168.2.140:8081/api/dept/login",
                type: 'json',
                body:`{"phone":${JSON.stringify(this.iphone)},"password":${JSON.stringify(this.pass)}}`,
                headers:{
                    'Content-Type':'application/json'
                },
                mode:"cors"
            }, function (ret) {
                if (!ret.ok) {
                    alert("手机号或密码不正确！");
                    console.log(ret)
                } else {
                    if(ret.data.data.code==2){
                        // 存用户id
                        const info2 = {
                            idCode: ret.data.data.shopaccountd,
                        };
                        localStorage.setItem('usersid', JSON.stringify(info2));
                        // 存token
                        let info1 = {
                            token:ret.data.data.token,
                        };
                        localStorage.setItem('tokens', JSON.stringify(info1));
                        // 跳转店铺首页
                        location.href="#/home";
                    }else{
                        location.href="#/create_shop"
                    }
                    console.log(ret);
                }
            }, function (response) {
                console.log(response);
            });
  
            
        };

	   },

	    // 跳转回首页
	   show2(){
			this.$router.push('/index');
	   },
	   // 找回密码页
	   search_pass(){
			this.$router.push('/search_pass');
	   },
	   // 点击找回密码
	   show7(){
			this.$router.push('/search_pass');
	   },
	   // 点击快捷登录页
	   show8(){
	   		this.show = false;
	   		this.$router.push('/shortcut_login');
	   },
	   // 点击跳转用户协议
	   user_agreement(){
	   		this.$router.push('/user_agreement');
	   },
	   // 点击快捷登录
	   shortcut_login(){
	   		this.$router.push('/shortcut_login');
	   },
     // 输入错密码，然后跳转去注册
     forget(){
        this.$router.push('/register');
     }
	}
}
</script>